<h1 id="样式文件说明"><a class="markdownIt-Anchor" href="#样式文件说明"></a> 样式文件说明</h1>
<h2 id="样式拆分说明"><a class="markdownIt-Anchor" href="#样式拆分说明"></a> 样式拆分说明</h2>
<p>方案是对 <a href="https://blog.skk.moe/post/improve-fcp-for-my-blog/">https://blog.skk.moe/post/improve-fcp-for-my-blog/</a> 的开源实现</p>
<h3 id="firststyl"><a class="markdownIt-Anchor" href="#firststyl"></a> first.styl</h3>
<p>首屏样式, 内含 首屏基础样式、 cover、 navbar、 首屏search、首屏暗黑模式、首屏字体 等样式, 首屏样式采用硬编码的方式写在HTML中.</p>
<p>内联硬编码自动化方案 see：scripts/helpers/first-style/index.js</p>
<h3 id="stylestyl"><a class="markdownIt-Anchor" href="#stylestyl"></a> style.styl</h3>
<p>异步加载样式, 除首屏样式外的其他样式, 最终生成 /css/style.css 异步加载.</p>
<h2 id="暗黑模式样式说明"><a class="markdownIt-Anchor" href="#暗黑模式样式说明"></a> 暗黑模式样式说明</h2>
<p>暗黑模式样式被拆分为首屏暗黑模式样式和异步暗黑模式样式，其中在 source/css/ 文件夹下：</p>
<p>_first/dark_first.styl ： 包含 首屏暗黑模式样式 的 暗黑模式 CSS 变量 和 强制覆盖样式</p>
<p>_style/_plugins/_dark ： 异步暗黑模式样式文件夹</p>
<p>_style/_plugins/_dark/dark_async.styl ： 包含 异步暗黑模式样式 的 暗黑模式 CSS 变量</p>
<p>_style/_plugins/_dark/dark_plugins.styl ： 包含 异步暗黑模式样式 的 强制覆盖样式</p>
